<#if !reportModel?? || (reportModel.viewtype?? && reportModel.viewtype == "view") || (viewtype ?? && viewtype == "table")>
	<div class="designer_k noborder" class="rs_layout_center" id="data_table" style="height:100%;">
		 <#include "table.html"/> 
	</div>
<#else>
	<div class="rs_layout">
		<div class="rs_layout_right"  resizable="true" minsize="true" style=" width: 265px;">
			<div style="height:100%;margin: 1px;overflow:hidden;" id="compCnf" <#if reportModel?? && reportModel.expandrgt == false>class="leftminsize"</#if>>
				<div class="rs_layout" style="height:100%;" id="chartmagic">
					<div class="rs_layout_top">
						<div class="data_model" style="height:31px;line-height:22px;padding-left:5px;width:267px;">
							<ul class="nav_tapWrap nav_tabwps_3">
								<li class="nav_tapIthems cur" id="config"><i class="tabIcon tabicon-4009"></i>配置</li>
								<li class="nav_tapIthems" id="model"><i class="tabIcon tabicon-4109"></i>属性</li>
								<li class="nav_tapIthems" id="layout" style="display:none;"><i class="tabIcon tabicon-4008"></i>布局</li> 
							</ul>
							<div style="float: right;display:none;" class="tools" id="layout_tool">
								<a href="javascript:void(0)" onclick="BtnAction.addLayoutNewRow($(this).attr('data-id') , '#cz_${reportModel.id}')" data-id="" class="layoutbtn"><i title="增加行" data-id="" style="margin:0px;" class="tabIcon top_icon9 layoutbtn"></i></a>
								<a href="javascript:void(0)" onclick="BtnAction.addLayoutNewCol($(this).attr('data-id') , '#cz_${reportModel.id}')" data-id="" class="layoutbtn"><i title="增加列" data-id="" style="margin:0px;" class="tabIcon top_icon8 layoutbtn"></i></a>
							</div>
							<div style="float: right;display:none;" class="tools" id="chart_tool">
								<a href="javascript:void(0)" onclick="BtnAction.addChartNewYAxis($(this).attr('data-id') , '#cz_${reportModel.id}')" data-id="" class="layoutbtn"><i title="增加Y轴数据" data-id="" style="margin:0px;" class="tabIcon top_icon9 layoutbtn"></i></a>
								<a href="javascript:void(0)" onclick="BtnAction.addChartNewSeries($(this).attr('data-id') , '#cz_${reportModel.id}')" data-id="" class="layoutbtn"><i title="增加数据分组" data-id="" style="margin:0px;" class="tabIcon top_icon8 layoutbtn"></i></a>
							</div>
						</div>
					</div>
					<div class="rs_layout_center nav_tabwps_3con" style="margin-left: 0px; margin-right: 0px;height:100%;overflow:auto;">
						<div class="nav_tabwps_3_layouts show" style="height:100%;">	
							<ul class="ztree" id="properties_tree"></ul>
						</div>
						<div class="nav_tabwps_3_layouts" id="modelproperties">
							<#include "chartproperties.html"/> 
						</div>
						<div class="nav_tabwps_3_layouts" id="layoutproperties">
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="noborder rs_layout_center" id="chart_table" style="overflow:hidden;z-index:10000;border: 1px solid #09f;">	
			<div style="position: relative;width:100%;height:100%;" id="dsnpanel">
				<div class="rs_layout">
					<div class="rs_layout_center">
						<div style="margin-right:0px;overflow:auto;padding:2px 0px 0 0px;height:100%;" class="selectable" id="cz_<#if reportModel??>${reportModel.id}</#if>" data-id="<#if reportModel??>${reportModel.id}</#if>">
							<#include "chartemplet.html"/>
						</div>
					</div>
					<div class="rs_layout_bottom" minsize="true" resizable="true" style="height:265px;width:100%;" id="dsproperties">
						<div class="rs_layout noborder chart_data_panel" style="height:100%;width:100%;">  
							<div class="rs_layout_top" style="background-color:#FFFFFF;">  			
								<ul class="nav_tapWrap nav_tabwps_4">
									<li class="nav_tapIthems cur"><i class="tabIcon tabicon-2"></i>数据</li>
									<!--
									<li class="nav_tapIthems" id="format"><i class="tabIcon tabicon-4009"></i>属性</li>
									<li class="nav_tapIthems"><i class="tabIcon tabicon-4008"></i>布局</li>
									<li class="nav_tapIthems"><i class="tabIcon tabicon-4010"></i>预警</li>	 -->
									
								</ul>
							</div>
							<div class="nav_tabwps_4con designer_k rs_layout_center" id="data_panel" style="margin-left: 0px; margin-right: 2px; background-color:#FFFFFF;">
								<div class="nav_tabwps_4_layouts show" style="height:100%;">					
									<div class=" panel-noscroll chart_data" id="data_table" style="padding:5px;overflow:auto;">
										<#include "table.html"/> 
									</div>
								</div>
								<div class="nav_tabwps_4_layouts">
									
								</div>
								<div class="nav_tabwps_4_layouts">3</div>
							</div>
						</div>
					</div>						
				</div>
			</div>
		</div>
		
	</div>
	<script language="javascript">
		curNode = null ;
		var propertiesSetting = {
			data: {					
				simpleData: {
					enable: true
				}
			},
			view: {
				showLine: false,
				nameIsHTML: true
			},
			callback: {
				onClick: function(event, treeId, treeNode) {
					curNode = treeNode ;
				},
				onDblClick: function(e, treeId, treeNode){
					if(treeNode.datagroup){
						tipArtPageWithLock('选择图表展示类型',url_list.datagroup_url+"?pkgid="+treeNode.pkgid+"&dsid="+treeNode.sid, 500 , false) ;
					}
				}
			}
		};

		function selectCurComp(id , layout){	 			
			$(".cur_model").each(function(){
				$(this).removeClass("cur_model");
			});
			$(".td_cur_model").each(function(){
				$(this).removeClass("td_cur_model");
			});
			$("#comp_"+id).addClass("cur_model");
			if(layout!=''){
				$(".layoutbtn").each(function(){
					$(this).attr('data-id' , id);
				});
				$('#layout_tool').show();
			}else{
				$(".layoutbtn").each(function(){
					$(this).attr('data-id' , "");
				});
				$('#layout_tool').hide();
			}
			return false ;
		}
		function selectTdCurComp(id){	 			
			$(".cur_model").each(function(){
				$(this).removeClass("cur_model");
			});
			$(".td_cur_model").each(function(){
				$(this).removeClass("td_cur_model");
			});
			$("#comp_"+id).parents("td").addClass("td_cur_model");
			
			return false ;
		}

		function selectChartXCurComp(id , seriesid){	 			
			selectCurComp(id , "")

			return false ;
		}
		function selectChartYCurComp(id , seriesid){	 			
			selectCurComp(id , "")

			return false ;
		}
		function selectChartSeriesCurComp(id , seriesid){	 			
			selectCurComp(id , "")	;  			
			return false ;
		}
		function delYAxis(yaxisdata){
			BtnAction.deleteYAxisData($(yaxisdata).attr('data-pkgid') , $(yaxisdata).attr('data-id') , '#design_table');
		}

		var propertiesNode = [
				{ id:1, pId:0, name:"组件属性", open:true}
				<#if reportModel.modelPackageList??>
				<#list reportModel.modelPackageList as modelPackage>
				,{ id:'${modelPackage.id!""}', pId:1, name:"${modelPackage.name!''}" , type:"${modelPackage.type!'model'}",icon:"/assets/images/design/${modelPackage.type!'model'}.png" , pkgid:"${modelPackage.id!''}" , serise : "true"  , open : true, click:"selectCurComp('${modelPackage.id}' , '<#if modelPackage.pkglayout==true>layout<#else></#if>')"}
				<#if modelPackage.pkgtype == "chart">
					,{ id:'${modelPackage.id!""}_x', pId:'${modelPackage.id!""}', name:"X轴数据<#if modelPackage.chart?? && modelPackage.chart.xaxis??>：${modelPackage.chart.xaxis!''}</#if>" , type:"${modelPackage.type!'model'}" , action : "xaxis",icon:"/assets/images/design/axis.png", pkgid:"${modelPackage.id!''}"  , serise : "false"  , open : true, click:"selectChartXCurComp('${modelPackage.id}')"}
					/**
					,{ id:'${modelPackage.id!""}_y', pId:'${modelPackage.id!""}', name:"Y轴数据" , type:"${modelPackage.type!'model'}",icon:"/assets/images/design/axis.png", pkgid:"${modelPackage.id!''}"  , action : "yaxis",serise : "false"  , open : true, click:"selectChartYCurComp('${modelPackage.id}')"}
					<#if modelPackage?? && modelPackage.chart?? && modelPackage.chart.yaxis??>
					<#list modelPackage.chart.yaxis as series>
					,{ id:'${series.id!""}_yaxisdata', pId:'${modelPackage.id!""}_y', sid:"${series.id!''}" ,  name:"${series.name!''}&nbsp;<a href='javascript:void(0)' onclick='delYAxis(this);' data-pkgid='${modelPackage.id!''}' data-id='${series.id!''}' title='删除Y轴数据：${series.name!''}'><i title='删除Y轴数据：${series.name!''}' data-id='' style='margin:0px;' class='tabIcon top_icon10 layoutbtn'></i></a>" , type:"${modelPackage.type!'model'}",icon:"/assets/images/design/series.png", pkgid:"${modelPackage.id!''}" , action : "yaxisdata"  , serise : "false"  , open : true, click:"selectChartYCurComp('${modelPackage.id}' , '${series.id!''}')"}
					</#list>
					</#if>
					**/
					,{ id:'${modelPackage.id!""}_series', pId:'${modelPackage.id!""}', name:"数据分组" , type:"${modelPackage.type!'model'}",icon:"/assets/images/design/series.png", pkgid:"${modelPackage.id!''}"  , serise : "true"  ,action : "serise", open : true, click:"selectChartSeriesCurComp('${modelPackage.id}')"}
					<#if modelPackage?? && modelPackage.chart?? && modelPackage.chart.series??>
					<#list modelPackage.chart.series as series>
					,{ id:'${series.id!""}_series_data', pId:'${modelPackage.id!""}_series', name:"${series.name!''}<#if series.range??>（${series.range}）</#if>&nbsp;<a href='javascript:void(0)' onclick='delYAxis(this);' data-pkgid='${modelPackage.id!''}' data-id='${series.id!''}' title='删除Y轴数据：${series.name!''}'><i title='删除Y轴数据：${series.name!''}' data-id='' style='margin:0px;' class='tabIcon top_icon10 layoutbtn'></i></a>" , type:"${modelPackage.type!'model'}",icon:"/assets/images/design/series.png", pkgid:"${modelPackage.id!''}"  , serise : "false"  , sid:"${series.id!''}" ,action:"series_data" ,datagroup:true ,open : true, click:"selectChartYCurComp('${modelPackage.id}' , '${series.id!''}')"}
					</#list>
					</#if>
				</#if>
				<#if modelPackage.layoutcontent??>
				<#list modelPackage.layoutcontent as rows>
				<#list rows as layoutpkg>
				<#if layoutpkg?? && layoutpkg.modelpkg??>
				,{ id:'${layoutpkg.modelpkg.id!""}', pId:'${modelPackage.id!""}', name:"${layoutpkg.modelpkg.name!''}" , type:"${modelPackage.type!'model'}",icon:"/assets/images/design/system-2.png",pkgid:"${modelPackage.id!''}"  , serise : "false"  , open : true, click:"selectTdCurComp('${layoutpkg.modelpkg.id}')"}
					<#if layoutpkg.modelpkg.pkgtype == "chart">
						,{ id:'${layoutpkg.modelpkg.id!""}_x', pId:'${layoutpkg.modelpkg.id!""}', name:"X轴数据<#if layoutpkg.modelpkg.chart?? && layoutpkg.modelpkg.chart.xaxis??>：${layoutpkg.modelpkg.chart.xaxis!''}</#if>" , type:"${layoutpkg.modelpkg.type!'model'}" , action : "xaxis",icon:"/assets/images/design/axis.png", pkgid:"${layoutpkg.modelpkg.id!''}"  , serise : "false"  , open : true, click:"selectChartXCurComp('${layoutpkg.modelpkg.id}')"}
						/**
						,{ id:'${layoutpkg.modelpkg.id!""}_y', pId:'${layoutpkg.modelpkg.id!""}', name:"Y轴数据" , type:"${layoutpkg.modelpkg.type!'model'}",icon:"/assets/images/design/axis.png", pkgid:"${layoutpkg.modelpkg.id!''}"  , action : "yaxis",serise : "false"  , open : true, click:"selectChartYCurComp('${layoutpkg.modelpkg.id}')"}
						<#if modelPackage?? && layoutpkg.modelpkg.chart?? && layoutpkg.modelpkg.chart.yaxis??>
						<#list layoutpkg.modelpkg.chart.yaxis as series>
						,{ id:'${series.id!""}_yaxisdata', pId:'${layoutpkg.modelpkg.id!""}_y', sid:"${series.id!''}" ,  name:"${series.name!''}&nbsp;<a href='javascript:void(0)' onclick='delYAxis(this);' data-pkgid='${layoutpkg.modelpkg.id!''}' data-id='${series.id!''}' title='删除Y轴数据：${series.name!''}'><i title='删除Y轴数据：${series.name!''}' data-id='' style='margin:0px;' class='tabIcon top_icon10 layoutbtn'></i></a>" , type:"${layoutpkg.modelpkg.type!'model'}",icon:"/assets/images/design/series.png", pkgid:"${layoutpkg.modelpkg.id!''}" , action : "yaxisdata"  , serise : "false"  , open : true, click:"selectChartYCurComp('${layoutpkg.modelpkg.id}' , '${series.id!''}')"}
						</#list>
						</#if>
						**/
						,{ id:'${layoutpkg.modelpkg.id!""}_series', pId:'${layoutpkg.modelpkg.id!""}', name:"数据分组" , type:"${layoutpkg.modelpkg.type!'model'}",icon:"/assets/images/design/series.png", pkgid:"${layoutpkg.modelpkg.id!''}"  , serise : "true"  ,action : "serise", open : true, click:"selectChartSeriesCurComp('${layoutpkg.modelpkg.id}')"}
						<#if modelPackage?? && layoutpkg.modelpkg.chart?? && layoutpkg.modelpkg.chart.series??>
						<#list layoutpkg.modelpkg.chart.series as series>
						,{ id:'${series.id!""}_series_data', pId:'${layoutpkg.modelpkg.id!""}_series', name:"${series.name!''}<#if series.range??>（${series.range}）</#if>&nbsp;<a href='javascript:void(0)' onclick='delYAxis(this);' data-pkgid='${modelPackage.id!''}' data-id='${series.id!''}' title='删除Y轴数据：${series.name!''}'><i title='删除Y轴数据：${series.name!''}' data-id='' style='margin:0px;' class='tabIcon top_icon10 layoutbtn'></i></a>" , type:"${layoutpkg.modelpkg.type!'model'}",icon:"/assets/images/design/series.png",action:"series_data" , pkgid:"${layoutpkg.modelpkg.id!''}"  , serise : "false"  , sid:"${series.id!''}" ,datagroup:true ,open : true, click:"selectChartYCurComp('${layoutpkg.modelpkg.id}' , '${series.id!''}')"}
						</#list>
						</#if>
					</#if>
				


				</#if>
				</#list>
				</#list>
				</#if>
				</#list>
				</#if>	
				
				
				
		];
		$(".nav_tabwps_3").rs_simpleTabs({
			tabElem				:".nav_tapIthems",			//切换标签的子元素
			tabCurrent			:"cur",						//切换标签的Current状态
			tabCont				:".nav_tabwps_3con",		//切换的元素内容父级
			tabContLayer		:".nav_tabwps_3_layouts",	//切换的元素内容层
			tabContLayerShow	:"show",					//切换的元素Current状态
			afclick				:null						//回调函数接口			
		});	
		$(".nav_tabwps_4").rs_simpleTabs({
			tabElem				:".nav_tapIthems",			//切换标签的子元素
			tabCurrent			:"cur",						//切换标签的Current状态
			tabCont				:".nav_tabwps_4con",		//切换的元素内容父级
			tabContLayer		:".nav_tabwps_4_layouts",	//切换的元素内容层
			tabContLayerShow	:"show",					//切换的元素Current状态
			afclick				:null						//回调函数接口			
		});	
		var dataModelPropertiesTree ;
		$(document).ready(function(){ 			
			dataModelPropertiesTree = $.fn.zTree.init($(document.getElementById("properties_tree")), propertiesSetting, propertiesNode);   			
		});
	</script>
</#if>
